<template>
	<view class="s-back">
		
		<view class="s-back" :style="{
			paddingTop:statusbarHeight+'px'
		}">
			<view class="s-back" style="position: absolute;">
				<view class="s-back"> 	
					<view class="index-line1" style="color:#fff">
			<view style="width: 80px;">
				<uni-icons type="back" size="25" @click="goBack" color="#fff"></uni-icons>
			
				<!-- <uni-icons type="plus-filled" color="#000" size="30"></uni-icons>
				<view class="index1-text">订阅</view> -->
				
			</view>
			<view class="index2">{{ pageTitle }}</view>
			<view class="index3">
				<view style="width: 90px;height: 10px;"></view>
				<!-- <uni-icons class="index3-mr4" type="tune" color="#80E58B" size="25" @click="micClick"></uni-icons>
				<uni-icons class="index3-mr4" type="reload" color="#80E58B" size="25" @click="micClick"></uni-icons>
				<uni-icons type="gear" color="#80E58B" size="25" @click="micClick"></uni-icons>
				 -->
			</view>
			
						
					</view>
					<scroll-view scroll-y="true" scroll-x="true" 
          :style="{
            background: '#1A2134',
           paddingBottom:'20px',
            width:screenWidth + 'px',
            height:screenHeight - bottomHeight - 140 - statusbarHeight +'px',
			position:'relative'
			
          }" class="scrollView" 
		  :scroll-top="scrollTopHeight"
					show-scrollbar="true" :scroll-into-view="getScrollView" scroll-with-animation="true">
					<view id="scroll-view-content">
				
			<view :class="item.speaker=='Self'?'index-flex-right':'index-flex-left'" v-for="(item,index) in chatList" :key="index" v-if="item.isDelete==false">
				<div class="index-no" v-if="item.speaker=='Self'&&item.isUndo">!</div>
				<chat-item 
						@undo="undo"
						@delete="deleted"
						:dynamicId="index.toString()" 
						:speaker="item.speaker"  
						:text="item.text" 
						:textTemp="textTemp"
						:isLoading="index==chatList.length-1?isLoading:false"
						:contentType="item.contentType"  
						:imageSrc="item.imageSrc" 
						:imageList="getImageList" 
						:audioSrc="item.audioSrc" 
						:createTime="item.createTime"
						:isUndo="item.isUndo">
						<!-- <view class="uni-flex uni-row" :style="setDatetimeStyle(item.createTime,index)">
							<view>
								{{computeDate(item.createTime,index)}}
							</view> 
						</view> -->
						</chat-item> 
						<div class="index-mt12" v-if="item.speaker=='Others'&&isVoice==1">

							<image style="width:50px;height: 50px;" src="/static/img/voice.png" @click="getVoice(index)"></image>
							
							<!-- <uni-icons type="mic-filled" color="#80E58B" size="25" ></uni-icons> -->
						
						</div>
				
				
					</view>

				</view>
			<div style="width:100%;height: 120rpx;"></div>
					
		</scroll-view>
							<!--"'position: fixed;bottom:'+bottomHeight+'px;width: 100%;'"-->
				</view >	<!--position: fixed;bottom: 0px;--><!---->
				<view style="background-color: rgb(21, 21, 32);" :style="'position: absolute;bottom:'+(0-76).toString()+'px;left:0;right:0;width:auto;display:block;padding-bottom:0px'"
				class="bottomClass1">

				<!-- <view class="uni-row uni-flex index-ml10" style="" >
						<div style="-webkit-flex: 1;flex: 1;text-align: center;" id="mic" >
							<uni-icons type="mic" color="#80E58B" size="25" @click="micClick" v-if="clickMic==false"></uni-icons>
							<uni-icons type="mic-filled" color="#80E58B" size="25" @click="micClick" v-if="clickMic==true"></uni-icons>
						</div> 
					
					</view>  -->

					<view class="new-bottom">

				

					<view class="index-inp uni-row uni-flex" style="align-content: center;justify-content: center;" >
            <div class="example1 out">
   

            <div class="inputClass in" style=""> 
				<textarea :maxlength="-1" auto-height class="index-inp-inner" placeholder="输入您想问的..." 
							confirm-type="send" style="font-size: 30rpx;" 
							cursor-spacing="40" @confirm="sendMessage" 
							@keyboardheightchange="getKeyBoradHeight"   
							ref="inputRef" v-model="inputcontent" /> 

							
						</div> 
          </div>
						<!-- <div style="justify-content: flex-end;text-align: center;margin-top: 20rpx; -webkit-flex: 1;flex: 1;">
							<uni-icons type="redo" size="25" style="margin-left: 50%;" ></uni-icons>
						</div> --> 
					</view>  
					<uni-icons style="margin:0 10px;" type="paperplane" color="#80E58B" size="25" @click="sendMessage(inputcontent)"></uni-icons>
					
					</view>
					<view class="bottom-bar">
						<view @tap="jumpTabbar(item.id)" class="item" v-for="(item,index) in tabbars">
							<image :src="item.pic" style="width:60rpx;height:60rpx;"></image>
							<view class="text">{{ item.text }}</view>
						</view>
					</view>

					
				</view>
			</view>
		</view>	
		<popup ref="micpop" :maskColor="false" :bottom="true" :bodyBgColor="'bg-white'" @hide="micHide" id="micpop">
			<view style="height: 100%;" class="col-1">
				<view style="height: 20%" class="flex align-center justify-center text-xl">
					{{formatedRecordTime}} 
				</view>  
				<view class="flex align-center justify-center" style="height: 50%;" >
					<button class="cu-btn cuIcon  shadow" :class="setButtonBg" style="width: 200rpx;height: 200rpx;" 
					@touchmove="micTouchMove" @touchend="micTouchEnd" @touchstart="micTouchStart" id="micbutton">
						<uni-icons type="mic" size="40"></uni-icons>
					</button> 
				</view>
				<view style="height: 20%;" class="flex align-center justify-center text-xl" v-if="isRecording==false"> 
					点击录音
				</view>
				<view style="height: 20%;" class="flex align-center justify-center text-xl" v-if="isRecording==true">
					向上滑动取消
				</view>
			</view>
		</popup>
		<popup ref="tips" :maskColor="false" :center="true" :bodyBgColor="'bg-white'" :mask="false">
			<view style="width: 250rpx;height: 250rpx;background-color: rgba(113,113,113,0.7)" 
			class="col-1 radius">
				<view class="flex align-center justify-center " style="height: 50%;margin-top: 30rpx;">
					<uni-icons type="refreshempty" size="60"></uni-icons>
				</view>
				<view class="flex justify-center align-center "
				style="color: #ffffff;">
					松手取消发送
				</view>
			</view>
		</popup>

		<u-popup mode="center" border-radius="60" v-model="isShowDele">
		<view class="edit-chat">
			<view class="title">您确定要清除所有聊天记录?</view>
			<view class="title2">将清空所有对话中的聊天内容，此操作无法恢复。</view>
			<view class="center">
					<view class="bottom">
					<view class="btn8" @tap="isShowDele=false">取消</view>
					<view class="btn9" @tap="save">确定</view>
				</view>
				</view>
		</view>
    </u-popup>
		
	</view>
</template>

<script>
let s
import config from '@/config'
import {handleSymbol,handleSymbolVoice,debounce} from '@/utils'
import {buf2hex,hexToStr,decodeUtf8,arrayBufferToString} from '@/utils/sse'
import {EventSourcePolyfill} from 'event-source-polyfill';
	// import permision from "@/common/permission.js"
	import popup from '@/components/popup/popup.vue';
	import chatItem from '@/components/chat-item/chat-item.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import socketItem from '@/components/socket-item/socket-item.vue'
	// var util=require('@/common/util.js')
	var recordManager=null;
	var recordTimeInterval=null;
	export default {
		name:"easyChat",
    components:{chatItem},
		data() {
			return {
				tabbars:[
					{
					id:1,
					pic:'/static/tabbar/1.png',
					text:'首页'
				},
				{
					id:2,
					pic:'/static/tabbar/2.png',
					text:'创作者'
				},
				{
					id:3,
					pic:'/static/tabbar/3.png',
					text:'助理'
				},
				// {
				// 	id:4,
				// 	pic:'/static/tabbar/5.png',
				// 	text:'绘画'
				// },
				{
					id:5,
					pic:'/static/tabbar/4.png',
					text:'我的'
				},
			],
				websocket:null,
				deleIdx:0,
				isShowDele:false,
				pageTitle:'',

				scrollTopHeight:0,
				textTemp:'',
				isLoadingText:false,
				isLoading:false,
				activeIndex:0,


        		socketUrl:'',
				timeStr:'', 
				clickMic:false, 
				scrollview:'',
				inputcontent:'',
				screenHeight:0,
				bottomHeight:10,
				micHeight:255,
				formatedRecordTime:"00:00:00",
				recordTime:0,
				isShowTips:false,
				isRecording:false,
				isCancel:false,
				socketTask:null,
				

				form:{},
			


				chatList:[],
        screenHeight:0,
        screenWidth:0,
        statusbarHeight:0,
		_audioContext:null,


		options:{},
		isVoice:false,
		source:null,
			}
		},
		async onLoad(opts) {
			await this.$onLaunched
			this.isVoice = uni.getStorageSync('isVoice')
			
			s = this
			s.options = opts
			this.screenWidth = uni.getStorageSync('screenWidth')
      this.statusbarHeight = uni.getStorageSync('statusBarHeight')
			this.screenHeight = uni.getStorageSync('screenHeight')
			s.pageTitle = uni.getStorageSync('pageTitle')||'聊天'
			uni.setNavigationBarTitle({
							title:s.pageTitle
							})
			s.getInfo()
				// #ifdef MP-WEIXIN
				let ext = wx.getExtConfigSync();
				console.log(ext,'sssssext')
				
				let domain = ext.domain || config.host;
				
				this.websocket = wx.connectSocket({
				url: 'wss://'+ domain +'/wss',
				
			})
			this.websocket.onMessage((res)=>{
					if(res.data!='data: [DONE]'){
						let id="dynamic_"+(s.chatList.length-1>-1?s.chatList.length-1:0).toString()
					
					s.$nextTick(()=>{
						s.textTemp+=res.data
					
						s.scrollToBottom()
					})
					}else{
						this.isLoadingText = false
						let date=new Date()
					s.chatList.splice(s.chatList.length-1,1)
					let obj={
						speaker:'Others',
						contentType:'text',
						text:handleSymbol(s.textTemp),
						createTime:date.getTime(),
						isUndo:false,
						isDelete:false
					}

					
					
					s.chatList.push(obj)
					
					
					let id="dynamic_"+(s.chatList.length-1>-1?s.chatList.length-1:0).toString()
					s.$nextTick(()=>{
						s.textTemp = ''
						
						s.isLoading = false
						setTimeout(()=>{
							s.scrollToBottom()
						},100)
						// s.scrollview=id  
					})
					}
				
				})
			// #endif
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.$nextTick(()=>{
						this.screenHeight=res.windowHeight
					})
				}
			})
			
			this.$nextTick(()=>{
				recordManager=uni.getRecorderManager()
				recordManager.onStart(()=>{
					recordTimeInterval=setInterval(()=>{
						this.recordTime+=1;
						this.formatedRecordTime=this.recordTime
					},1000)
				})
				recordManager.onStop((res)=>{  
					if(this.isCancel){
						this.formatedRecordTime="00:00:00"
						this.isCancel=false
						this.recordTime=0 
					}else{ 
						if(this.recordTime<1){
							this.formatedRecordTime="00:00:00"
							this.recordTime=0
							uni.showToast({
								icon:'none',
								title:'发送时间太短',
								duration:1000
							})
							
						}else{
							this.recordTime=0
							let date=new Date()
							let obj={
								speaker:'Self',
								contentType:'audio',
								audioSrc:res.tempFilePath,
								createTime:date.getTime(),
								isUndo:false,
								isDelete:false
							}
							this.chatList.push(obj)
							let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
							this.$nextTick(()=>{
								this.scrollview=id 
								this.formatedRecordTime="00:00:00"
							})
							this.$refs.socket.sendAudioMsg(obj)
						}
					}
				})
			})
			
			uni.onKeyboardHeightChange((res)=>{
				this.scrollview="null"
				let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
				if(res.height>0){
					this.$nextTick(()=>{
						this.scrollview=id
					})
					 this.bottomHeight=res.height
					 
        //   if(res.height>30){
        //     this.bottomHeight=res.height - 40
        //   }
				}else{
					this.$nextTick(()=>{
						this.bottomHeight= 10
					})	
				}
				console.log(this.bottomHeight,'cccccc')
				
				
			}) 
		},
		components:{
			popup,
			chatItem,
			uniIcons,
			socketItem
		},
		computed:{
			getImageList(){
				let urls=[]
				this.chatList.forEach((item,index)=>{
					if(item.contentType=='image'){
						urls.push(item.imageSrc)
					}
				},this)
				return urls
			},
			getScrollView(){
				return this.scrollview
			},
			setButtonBg(){
				if(this.isRecording){
					return `bg-blue`
				}else{
					return `bg-gray`
				}
			}
		},
		methods: {
			jumpTabbar(type){
				let url = '/pages/index/index'
				switch(type){
					case 1:
						url = '/pages/index/index?isMiniprogram='+uni.getStorageSync('isMiniprogram')
						break
					case 2:
						url = '/pages/content/content'
						break
						case 3:
						url = '/pages/assist/assist'
						break
					case 4:
						url = '/pages/paint/paint'
						break
						case 5:
						url = '/pages/my/my'
						break
						
				}
				uni.switchTab({
							url: url
						})
						
			},
			async save(){
				let r
				if(s.options.type=='content'){
					r = await this.$u.api.createDele({
						model_id:this.options.id
					})
				}else{
					r = await this.$u.api.assistDele({
						model_id:this.options.id
					})
				}
				if(r){
					this.isShowDele = false
					this.chatList = []
					s.getDataList()
				}
				
			},
			async playVoice(src){
				if(this._audioContext) this._audioContext.pause()
				
				this._audioContext = null;
				this.createAudio(src);
			},
			createAudio(src) {
				var innerAudioContext = this._audioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = false;
				innerAudioContext.src = src;
				this._audioContext.play()
				return innerAudioContext;
			},
			async getVoice(idx){
				
				const r = await s.$u.api.chatVoice({content:handleSymbolVoice(s.chatList[idx].text)})
				if(r){
					s.playVoice(r.data)
				}
			},
			goBack(){
				uni.navigateBack({
					 delta: 1
				});
			},
			async getInfo(){
				let r
				if(s.options.type=='content'){
					r = await s.$u.api.createInfo({
						id:s.options.id
					})
				}else{
					r = await s.$u.api.assistInfo({
						id:s.options.id
					})
				}
				if(r){
					s.form = r.data
					s.getDataList()
				}
				
			},
			async getDataList(){
				let r
				if(s.options.type=='content'){
					r = await s.$u.api.createChatList({
						model_id:s.options.id
					})
				}else{
					r = await s.$u.api.assistChatList({
						model_id:s.options.id
					})
				}
				if(r){
					let date=new Date()
					let obj = {}
					r.data.forEach(item=>{
						if(item.role=='我'){
							obj={
								speaker:'Self',
								contentType:'text',
								text:item.content,
								createTime:date.getTime(),
								isUndo:false,
								isDelete:false
							}
							
						}else{
							obj={
								speaker:'Others',
								contentType:'text',
								text:handleSymbol(item.content),
								createTime:date.getTime(),
								isUndo:false,
								isDelete:false
							}
						}
						this.chatList.push(obj)
					})

					if(s.chatList.length==0){
						let str = uni.getStorageSync('welcome')
						s.chatList.push(
							{
								speaker:'Others',
								contentType:'text',
								text:s.form.hint_content|| str,
								createTime:date.getTime(),
								isUndo:false,
								isDelete:false
							}
						)
					}
					setTimeout(()=>{
						s.scrollToBottom()
					},100)
				}
			},
			getData(val){
				this.isLoadingText = true
				let host = uni.getStorageSync('host')||''
				let url = host+'/gptcms/api/createchat/send?model_id='+s.options.id+'&message='+encodeURIComponent(val)
				if(s.options.type!='content') url = host+'/gptcms/api/rolechat/send?model_id='+s.options.id+'&message='+val
				
				// #ifdef MP-WEIXIN
				let json = {
					"wid":uni.getStorageSync('wid'),
					"token":uni.getStorageSync('h5Token'),
					"message":val,
					// "chatmodel":s.form.chatmodel[s.current].type,

					"type":s.options.type!='content'?'role':'create',
					"model_id":s.options.id
				}
				
				console.log(json,'asdasdasd')
				this.websocket.send(
					{ data:JSON.stringify(json)}
				)

				let date=new Date()
				s.isLoading = true
					s.isLoadingText = true
					let obj={
						speaker:'Others',
						contentType:'text',
						text:'',
						createTime:date.getTime(),
						isUndo:false,
						isDelete:false
					}
					s.chatList.push(obj)
					let id="dynamic_"+(s.chatList.length-1>-1?s.chatList.length-1:0).toString()
					s.$nextTick(()=>{
						// s.scrollview=id  
						s.scrollToBottom()
					})
			

				
				// #endif

				// #ifdef H5
				s.source = new EventSourcePolyfill(url,
				{
					headers:{
						'wid':uni.getStorageSync('wid')||'1',
						'token':uni.getStorageSync('h5Token')||''
           }
				}
				)
				s.source.onopen =function(e){
					let date=new Date()
					s.isLoading = true
					s.isLoadingText = true
					let obj={
						speaker:'Others',
						contentType:'text',
						text:'',
						createTime:date.getTime(),
						isUndo:false,
						isDelete:false
					}
					console.log(s.chatList,'ddddddd')
					s.chatList.push(obj)
					let id="dynamic_"+(s.chatList.length-1>-1?s.chatList.length-1:0).toString()
					s.$nextTick(()=>{
						// s.scrollview=id  
						s.scrollToBottom()
					})
				};


				s.source.onmessage =function(event){
					console.log(event.data)
					// console.log(event.data,'pppp')
					let id="dynamic_"+(s.chatList.length-1>-1?s.chatList.length-1:0).toString()
					
					s.$nextTick(()=>{
						s.textTemp+=event.data
						
						s.scrollToBottom()
					})
				};

				s.source.onerror =function(err){
					let date=new Date()
					
					
					s.source.close();

					s.isLoading = false
					s.isLoadingText = false
					
					s.chatList.splice(s.chatList.length-1,1)
					let obj={
						speaker:'Others',
						contentType:'text',
						text:handleSymbol(s.textTemp),
						createTime:date.getTime(),
						isUndo:false,
						isDelete:false
					}

					
					
					s.chatList.push(obj)
					
					
					let id="dynamic_"+(s.chatList.length-1>-1?s.chatList.length-1:0).toString()
					s.$nextTick(()=>{
						s.textTemp = ''
						
						s.isLoading = false
						setTimeout(()=>{
							s.scrollToBottom()
						},100)
						// s.scrollview=id  
					})
					
				};
				// #endif
				
			},
			scrollToBottom(){
				uni.createSelectorQuery().in(s).select('#scroll-view-content').boundingClientRect((res)=>{
							let top = res.height-(s.screenHeight - s.bottomHeight - 200);
							if(top>0){
								this.scrollTopHeight=top;
							}
						}).exec()
			},
			subscribe(){
				uni.navigateTo({
					url:'/pages/subscribe/subscribe'
				})
			},
			readmethod(){
				
				 
			},
			longpressmethod(e){
				let id=e.target.id
				let itemY=0
				let itemX=0
				uni.createSelectorQuery().in(this).select(`#test1`).boundingClientRect(data=>{
					let X0=data.left
					let X1=data.right 
					itemX=(X0+X1)/2
					itemY=data.top
					this.$refs.popup.show(itemX,itemY)
				}).exec();
				
			},
			computeDate(datetime,index){
				if(datetime){
					let date=new Date()
					if(index>0){
						let beforetimestrap=this.chatList[index-1].createTime
						if((datetime-beforetimestrap)>60000){
							date.setTime(datetime)
							let time=date.toString()
							let localtime=time.split(" ")[4]
							return localtime
						}else{
							return ''
						}
					}else{
						return ''
					}
				}else{
							
					return ''
				}
			},
			setDatetimeStyle(datetime,index){
				if(datetime){
					if(index>0){
					  let beforetimestrap=this.chatList[index-1].createTime
					  if((datetime-beforetimestrap)>60000){
					  	return 'justify-content: center;align-content: center;margin-bottom: 25rpx;font-size: 25rpx;'
					  }else{
					  	return ''
					  }
					}else{
						return '' 
					}
				}else{
					return ''
				}
			},
			sendMessage(res){
				
				debounce(
					function(){
						s.sendMessage1(res)
					}
				)
			},
			async sendMessage1(res){
				let text= ''
				if(typeof(res)=='string') text=res
				else text = res.detail.value
				
				
				let date=new Date()
				if(text&&!this.isLoading&&!this.isLoadingText){
					const r = await this.$u.api.chatCheck({
						text:text,
						type:s.options.type=='content'?'createchat':'rolechat',
						model_id:s.options.id,
					})
					if(r){
						if(r.data.code!=1){
							let obj={
								speaker:'Self',
								contentType:'text',
								text:r.data.text,
								createTime:date.getTime(),
								isUndo:false,
								isDelete:false
							}
							
							this.chatList.push(obj)
							let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
							this.$nextTick(()=>{
								this.inputcontent=''  
								this.scrollview=id  
							})
							this.getData(r.data.text)
						}else{
							this.$nextTick(()=>{
								this.inputcontent=''  
								this.scrollview=id  
							})
							this.$u.toast(r.data.text);
						}
					}
					
				}
			},
			async checkPermission() {
			    // let status = permision.isIOS ? await permision.requestIOS('record') :
			    //     await permision.requestAndroid('android.permission.RECORD_AUDIO');
			
			    // if (status === null || status === 1) {
			    //     status = 1;
			    // } else if (status === 2) {
			    //     uni.showModal({
			    //         content: "系统麦克风已关闭",
			    //         confirmText: "确定",
			    //         showCancel: false,
			    //         success: function(res) {
			    //         }
			    //     })
			    // } else {
			    //     uni.showModal({
			    //         content: "需要麦克风权限",
			    //         confirmText: "设置",
			    //         success: function(res) {
			    //             if (res.confirm) {
			    //                 permision.gotoAppSetting();
			    //             }
			    //         }
			    //     })
			    // }
			    return 1;
			},
		async micClick(){
				// let status=await this.checkPermission()
				// if(status!==1){
				// 	return;
				// }
				// if(this.clickMic){
				// 	this.clickMic=false
				// }else{
				// 	this.clickMic=true
				// 	this.$refs.micpop.show(-1,this.screenHeight-this.micHeight)
				// 	this.$nextTick(()=>{
				// 		this.bottomHeight=this.micHeight
				// 	})
					
				// 	let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
				// 	this.$nextTick(()=>{
				// 		this.scrollview=id
						  
				// 	})
				// 	this.scrollview="null"
				// }
			},
			imageClick(){
				let date=new Date()
				let urls=[]
				uni.chooseImage({
					sourceType:['album'], 
					count:6,
					success: (res) => {
						let imagepaths=res.tempFilePaths
						imagepaths.forEach((item,index)=>{
							let obj={
								speaker:'Self',
								contentType:'image',
								imageSrc:item,
								createTime:date.getTime(),
								isUndo:false,
								isDelete:false
							}
							this.chatList.push(obj)
							urls.push(item)
						})
						setTimeout(()=>{
							let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
							this.scrollview=id
						},500)
						this.$refs.socket.sendImageMsg(urls)
					},
					fail: (res) => {
						
					}
				})
				
			},
			cameraClick(){
				let date=new Date()
				uni.chooseImage({
					sourceType:['camera'], 
					success: (res) => {
						let imagepaths=res.tempFilePaths
						imagepaths.forEach((item,index)=>{
							let obj={
								speaker:'Self',
								contentType:'image',
								imageSrc:item,
								createTime:date.getTime(),
								isUndo:false,
								isDelete:false
							}
							this.chatList.push(obj)
						})
						setTimeout(()=>{
							let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
							this.scrollview=id
						},500)
					},
					fail: (res) => {
						
					}
				})
			},
			getKeyBoradHeight(res){
			},
			micHide(){
				this.bottomHeight=0
				this.clickMic=false
			},
			micTouchStart(e){
				this.isRecording=true
				recordManager.start({
					format:'mp3'
				})
			},
			micTouchMove(e){
				let boundery=this.screenHeight-this.bottomHeight+e.currentTarget.offsetTop
				if(e.touches[0].clientY<boundery&&!this.isShowTips){
					// #ifdef MP
						recordManager.pause()
					// #endif
					this.isCancel=true
					this.isShowTips=true
					this.$refs.tips.show()
				}
				if(e.touches[0].clientY>=boundery){
					// #ifdef MP
						recordManager.resume()
					// #endif
					this.isCancel=false
					this.isShowTips=false
					this.$refs.tips.hide() 
				}				
			},
			micTouchEnd(e){
				this.isRecording=false   
				clearInterval(recordTimeInterval)
				recordManager.stop()
				this.$refs.tips.hide()
				
			},
			undo(data){
				let index=parseInt(data.index)
				this.chatList[index].isUndo=true
				console.log(this.scrollview)
			},
			deleted(data){
				this.deleIdx=parseInt(data)
				this.isShowDele = true


				

				// this.$nextTick(()=>{
				// 	this.chatList[index].isDelete=true
				// })
			},
			onReciveMessages(message){
				
			},
			ontext(text){
				let obj=text.data
				this.chatList.push(obj)
				let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
				this.$nextTick(()=>{
					
					this.scrollview=id
				})
			},
			onimage(msg){
				let image=msg.data
				this.chatList.push(image)
				let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
				setTimeout(()=>{
					this.scrollview=id
				},500)
			},
			onaudio(msg){
				let audio=msg.data
				this.chatList.push(audio)
				let id="dynamic_"+(this.chatList.length-1>-1?this.chatList.length-1:0).toString()
				
				setTimeout(()=>{
					this.scrollview=id
				},500)
			}
		},
		beforeDestroy(){
			// #ifdef MP-WEIXIN
			this.websocket.close()
			this.websocket = null

			// #endif

			if(s.source){
				s.source.close()
				s.source = null
			}

			
		}
	}
</script>

<style lang="scss">
.example1 {
  &.out {
	width: 100%;
    padding: 2px;
    border-radius: 40rpx;
    background: linear-gradient(to right, #B46A80, #739B83,);
  }
  .in {
    width: calc(100vw - 70px);
	// #ifdef H5
	width: calc(100% - 20px);
	// #endif
    height: 100%;
    background: rgb(21, 21, 32);
    border-radius: 40rpx;
  }
}
.inputClass{

			background-color: transparent;
			align-content: center;
			padding: 5px 10px 5px 10px;
			font-size: 30rpx;
			width: 100%;
      // border: 1px solid;
      // border-image: linear-gradient(to right, red, #578aef) 1;
      // border-radius: 15px;
    }	
		
	.scrollView{
			position: fixed;
			right: 0px;
			left: 0;
			top: 0;
			/* padding-left: 10px;
			padding-right: 10px;
			padding-top: 10px; */
			width: auto;
		}	
		
	.bottomClass1{
		padding: 10px 12px;
    background: rgb(21, 21, 32);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    // height: 86px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
		
		}
    .uni-row{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    .uni-flex{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    .s-back{
      background: #1A2134;
    }
	.index-inp{
		width: 100%;
	}
	.index-inp-inner{
		width: calc(100% - 14px);
		height: 36px;
		color: #fff;
		padding: 0 10px;
	}
	.index-ml10{
		margin-right: 10px;
	}
	.index-flex-right{
		display: flex;
		justify-content: flex-end;
	}
	.index-flex-left{
		display: flex;
		justify-content: flex-start;
	}
	.index-no{
		margin-left: 12px;
		margin-top: 12px;
		background: #AA4B4F;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 26rpx;
		color: #fff;
		height: 60rpx;
		border-radius: 40rpx;
	}
	.index-mt12{
		margin-top: 16px;
		margin-right: 12px;
	}
	.index-line1{
		padding: 12px;
		display: flex;
		align-items: center;
	}
	.index1{
		padding: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20px;
		background: #E6D08D;
		color: #5F3D22;
		
	}
	.index1-text{
		margin-left: 2px;
		margin-right: 10px;
		font-size: 16px;
	}
	.index2{
		font-size: 36rpx;
		flex:1;
		display: flex;
		justify-content: center;
	}
	.index3-mr4{
		margin-right: 16rpx;
	}
	.index-line3{
		display: flex;
		align-items: center;
		margin: 24rpx;
		color: #fff;
		font-size: 32rpx;
	}
	.index-line2{
		margin:30rpx 24rpx;
		background: #323249;
		border-radius: 10px;
		padding:28rpx;
		color: #A3A3B7;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.index-line-mb12{
		margin-bottom: 60rpx;
	}
	.edit-chat{
		background:rgba(#151520, 0.9);
		padding: 20px;
		.title{
			color:#fff;
			font-size: 18px;
			margin-bottom: 20px;
		}
		.title2{
			color:#999;
			font-size: 14px;
		}
		.bottom{
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			width: 300px;
		.btn8{
				width: 130px;
				height: 36px;
				// background: #EDC596;
				color:#fff;
				border-radius: 80rpx;
				border:1px solid #7CD887;
				display: flex;
				justify-content: center;
				align-items: center;
			
				margin-right: 30rpx;
			}
			.btn9{
				color:#fff;
				width: 130px;
				height: 36px;
				// background-image: linear-gradient(to bottom, #E7B266,#ff8432);
				background-image: linear-gradient(to top, #7CD887,#75CCD1);
		
				border-radius: 80rpx;
				// border:1px solid #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bottom-bar{
		margin-top: 10px;
		padding-bottom: 16px;
		display: flex;
		
		justify-content: center;
		
		.item{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.text{
			margin-top: 4rpx;
			color:#686A7A;
			font-size:24rpx;
		}
	}
	.new-bottom{
		display: flex;
		 align-items: flex-end;
		//  #ifdef H5
		 margin-bottom: 30px;
		//  #endif
	}
</style>
